<template>
    <div class="app-container">
      <el-button type="primary" @click="add()">新增</el-button>
      <!-- 表格 -->
      <el-table :data="list" border stripe>
        <el-table-column type="index" width="50" />
        <el-table-column prop="borrowAmount" label="借款额度" />
        <el-table-column prop="integralStart" label="积分区间开始" />
        <el-table-column prop="integralEnd" label="积分区间结束" />
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="removeById(scope.row.id)"
            >
              删除
            </el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-delete"
              @click="updById(scope.row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
<!--弹框-->
      <el-dialog
        :title="integralTitle"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <!-- 输入表单 -->
        <el-form label-width="120px">
          <el-form-item label="借款额度">
            <el-input-number v-model="integralGrade.borrowAmount" :min="0" />
          </el-form-item>
          <el-form-item label="积分区间开始">
            <el-input-number v-model="integralGrade.integralStart" :min="0" />
          </el-form-item>
          <el-form-item label="积分区间结束">
            <el-input-number v-model="integralGrade.integralEnd" :min="0" />
          </el-form-item>
          <el-form-item>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addOrUpd()">确 定</el-button>
  </span>
      </el-dialog>
    </div>
</template>

<script>
  import integralGradeApi from '@/api/core/integral-grade'
    export default {
        name: "list",
      data() {
        return {
          list: [], // 数据列表
          dialogVisible: false,
          integralGrade:{
            borrowAmount: "",
            id: "",
            integralEnd: "",
            integralStart: "",

          },
          integralTitle:''
        }
      },
      // 页面渲染成功后获取数据
      created() {
        this.fetchData()
      },
      // 定义方法
      methods: {
        fetchData() {
          // 调用api
          integralGradeApi.list().then(response => {
            this.list = response.data.list
          })
        },
        // 根据id删除数据
        removeById(id) {
          this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              integralGradeApi.removeById(id).then(response => {
                this.$message.success(response.message)
                this.fetchData()
              })
            })
            .catch(error => {
              this.$message.info('取消删除')
            })
        },
        add(){
           this.dialogVisible = true
           this.integralTitle = "新增积分"
        },
        updById(row){

          this.dialogVisible = true
          this.integralTitle = "修改积分"
          this.integralGrade.borrowAmount = row.borrowAmount
          this.integralGrade.integralStart = row.integralStart
          this.integralGrade.integralEnd = row.integralEnd
          this.integralGrade.id = row.id
        },

        add1(){
          // debugger
          integralGradeApi.save(this.integralGrade).then(response => {
            this.$message({
              type: 'success',
              message: response.message
            })
            this.dialogVisible = false
            this.fetchData()
            this.integralGrade.borrowAmount = ""
            this.integralGrade.integralStart = ""
            this.integralGrade.integralEnd = ""
            this.integralGrade.id = ""
            // this.$router.push('/core/integral-grade/list')
          })
        },

        upd1(){
          // 数据的获取
          integralGradeApi.updateById(this.integralGrade).then(response => {
            this.$message({
              type: 'success',
              message: response.message
            })
            this.dialogVisible = false
            this.fetchData()
            this.integralGrade.borrowAmount = ""
            this.integralGrade.integralStart = ""
            this.integralGrade.integralEnd = ""
            this.integralGrade.id = ""
          })
        },

        addOrUpd(){
          if (this.integralTitle =="修改积分") {
            this.upd1()
          }else if (this.integralTitle =="新增积分") {
            this.add1()
          }

        },
      }

    }
</script>

<style scoped>

</style>
